<template>
  <div class="main">
    <div class="top_title">{{ topList.title }}</div>
    <div class="arrow_box">
      <div class="arrow" v-for="value in topList.list">
        <div class="arrow_img">
          <span class="arrow_title" :class="{ 'gray_txt': value.img !== 'blue' }">{{ value.name }}</span><img
            :src="value.img == 'blue' ? blueArrow : grayArrow">
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>

export default {
  props: ['topList'],
  data() {
    return {
      // topList: {
      //           title: '流程指引',
      //           list: [
      //               { name: '素材管理', img: 'blue' },
      //               { name: '内容创作', img: 'blue' },
      //               { name: '专家审核', img: 'blue' },
      //               { name: '产品分发', img: 'blue' },
      //               { name: '传播管理', img: 'blue' },
      //           ]
      //       },
     
      blueArrow: require('@/assets/images/blue_arrow.png'),
      grayArrow: require('@/assets/images/gray_arrow.png'),
    }
  },
  created() { },
  methods: {
  },

}
</script>

<style lang='scss' scoped>
.main {
  height: 170px;
  background-color: white !important;

  .top_title {
    padding: 28px 0 31px 32px;
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    color: #3D3D3D;
    line-height: 21px;
  }

  .arrow_box {
    display: flex;
    flex-direction: row;
    margin-left: 64px;

    .arrow {
      .arrow_img {
        position: relative;

        .arrow_title {
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: white;
          line-height: 21px;
          position: absolute;
          z-index: 2;
          top: 10px;
          left: 55px;
        }

        .gray_txt {
          font-weight: bold;
          color: #3D3D3D;
        }
      }
    }
  }

}
</style>